<template>
  <div class="gather-component">
    <div class="app-header-banner">
      <el-image :src="nav" fit="cover" class="status-bar"></el-image>
      <div class="app-header-nav">
        <el-image
          :src="coverImgFilter(seckilData.detailImage, 'coverImage')"
          fit="contain"
          class="app-header-coverImg"
        ></el-image>
      </div>
      <div class="app-header-card">
        <p class="app-header-card-title">
          {{ seckilData.collectName | appData('collectName') }}
        </p>
        <div class="app-header-card-time">
          <el-image
            :src="card_time_img"
            fit="cover"
            class="card_time_img"
          ></el-image>
          <p class="card_time_text">
            活动时间 :
            {{ seckilData.timeStart | appData_time('timeStart') }}
            至
            {{ seckilData.timeEnd | appData_time('timeEnd') }}
          </p>
        </div>
        <div class="app-header-card-inventedEnrollNumber">
          已有<span class="inventedEnrollNumber-text">{{
            seckilData.inventedEnrollNumber | appData('inventedEnrollNumber')
          }}</span
          >人报名
        </div>
        <el-image :src="card_right" fit="cover" class="card_right"></el-image>
        <div class="last-title">
          <p class="last-name">距报名结束仅剩</p>
          <div class="last-time">
            <span>1天</span>
            <span class="last-time-item">09</span>
            <span>:</span>
            <span class="last-time-item">04</span>
            <span>:</span>
            <span class="last-time-item">59</span>
          </div>
        </div>
      </div>
    </div>
    <div class="app-content">
      <div class="app-content-store">
        <div class="app-content-title app-content-store-title">
          活动地点
          <div class="app-content-line"></div>
        </div>
        <div v-for="(item, index) in seckilData.activityUnit" :key="index">
          <p class="app-content-store-name">
            {{ item.applicableUnit }}
          </p>
          <p class="app-content-store-address">
            {{ item.unitAddress }}
          </p>
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6" class="commodity-list">
              <p class="commodity-list-item-1">1.15km</p>
              <p class="commodity-list-item-2">距离</p>
            </el-col>
            <el-col :span="6">
              <p class="commodity-list-item-1">{{ item.serviceConsultant }}</p>
              <p class="commodity-list-item-2">服务顾问</p>
            </el-col>
            <el-col :span="6" class="vertical-center">
              <el-image :src="address" fit="cover"></el-image>
            </el-col>
          </el-row>
        </div>
        <p class="app-content-store-name margin-top-10">活动所属门店</p>
        <div class="app-content-store-address">
          <span>深圳汇天源科技园店</span>
          <el-image
            :src="phone"
            fit="cover"
            class="vertical-center-item-1"
          ></el-image>
        </div>
      </div>
      <div class="app-content-introduce">
        <div class="app-content-title app-content-store-title">
          活动介绍
          <div class="app-content-line"></div>
        </div>
        <div
          v-if="seckilData.collectContent && seckilData.collectContent != ''"
          v-html="seckilData.collectContent"
          class="card_introduce"
        ></div>
        <div v-else>
          <el-image
            :src="detailImage"
            fit="cover"
            class="card_introduce"
          ></el-image>
        </div>
      </div>
    </div>
    <div class="app-footer">
      <div class="app-footer-btn btn-share">分享好友</div>
      <div class="app-footer-btn btn-buy">立即抢购</div>
    </div>
  </div>
</template>

<script>
let defaultData = {
  collectName: '一键加油 | 立减20元',
  timeStart: '2021-12-31',
  timeEnd: '无限期',
  inventedEnrollNumber: 100,
  activeAddress: '深圳汇天源科技园店',
  coverImage: null,
  detailImage: null,
  activityUnit: [],
}
export default {
  name: 'gatherMobile',
  props: {
    seckilData: {
      collectName: {
        type: String,
      },
      gatherPrice: {
        type: String,
        default() {
          return ''
        },
      },
      originalPrice: {
        type: String,
        default() {
          return ''
        },
      },
      buyNum: {
        type: String,
        default() {
          return ''
        },
      },
      activityUnit: {
        type: Array,
        default() {
          return []
        },
      },
      timeStart: {
        type: String,
        default() {
          return ''
        },
      },
      timeEnd: {
        type: String,
        default() {
          return ''
        },
      },
    },
  },
  filters: {
    appData(val, key) {
      if (val && val != '') {
        return val
      } else {
        return defaultData[key]
      }
    },
    appData_time(val, key) {
      if (val && val != '') {
        let date = new Date(val)
        let year = date.getFullYear() // 获取当前年份(2位)
        let month = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
        let day = date.getDate() // 获取当前日(1-31)
        //修改月份格式
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }

        //修改日期格式
        if (day >= 0 && day <= 9) {
          day = '0' + day
        }
        return year + '-' + month + '-' + day
      } else {
        var date = new Date()
        var year = date.getFullYear() //年 ,从 Date 对象以四位数字返回年份
        var month = date.getMonth() + 1 //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
        var day = date.getDate() //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
        return year + ':' + month + ':' + day
      }
    },
  },
  data() {
    return {
      nav: require('./gather/stuta.png'),
      card_right: require('./gather/card_right.png'),
      card_time_img: require('./gather/time.png'),
      phone: require('./img/phone.png'),
      address: require('./img/address.png'),
      detailImage: require('./gather/card_introduce.png'),
      list: [
        {
          name: '品牌玻璃水',
          number: 2,
          capacity: '18支/盒',
          price: 58,
        },
        {
          name: '品牌玻璃水',
          number: 2,
          capacity: '18支/盒',
          price: 58,
        },
      ],
    }
  },
  methods: {
    coverImgFilter(val, key) {
      if (val && val != '') {
        return this.getImgUrl(val)
      } else {
        return require('./gather/nav.png')
      }
    },
    detailImgFilter(val, key) {
      if (val && val != '') {
        return val
      } else {
        return require('./gather/card_introduce.png')
      }
    },
  },
}
</script>

<style scoped>
.gather-component {
  width: 375px;
  background: #fffefe;
  font-size: 14px;
  border: 1px solid #ccc;
  margin: 0 auto;
}
.app-header-banner {
  height: 280px;
  width: 100%;
  position: relative;
}
.app-header-banner .status-bar {
  height: 90px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
.app-header-banner .app-header-coverImg {
  height: 260px;
  width: 375px;
}
.app-header-banner .app-header-card {
  width: 100%;
  height: 110px;
  position: relative;
  position: absolute;
  left: 0;
  top: 230px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 32px;
  background: linear-gradient(to right, #b6d2fc, #9dc3ee);
}
.app-header-banner .app-header-card .card_right {
  width: 140px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.app-header-banner .app-header-card .last-title {
  width: 140px;
  position: absolute;
  text-align: right;
  right: 16px;
  top: 0;
  bottom: 0;
  transform: translate(0, 50%);
  margin-bottom: 40px;
  color: #fff;
}
.app-header-banner .app-header-card .last-title .last-name {
  margin-bottom: 6px;
  font-size: 13px;
}
.app-header-banner .app-header-card .last-title .last-time-item {
  background: #fff;
  padding: 6px 4px;
  margin: 0 4px;
  font-size: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #ff676c;
}

.app-header-banner .app-header-card .app-header-card-title {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
}

.app-header-banner .app-header-card .app-header-card-inventedEnrollNumber {
  margin: 6px 0;
  font-size: 14px;
  color: #fff;
}
.app-header-banner
  .app-header-card
  .app-header-card-inventedEnrollNumber
  .inventedEnrollNumber-text {
  color: #527bb3;
  margin: 4px;
}
.app-header-banner .app-header-card .app-header-card-time {
  position: relative;
  margin-top: 15px;
}
.app-header-banner .app-header-card .app-header-card-time .card_time_img {
  height: 20px;
  width: 210px;
  line-height: 20px;
}
.app-header-banner .app-header-card .app-header-card-time .card_time_text {
  position: absolute;
  height: 20px;
  margin: 0 8px;
  font-size: 12px;
  top: 0;
  left: 0;
  line-height: 20px;
  color: #fff;
}

p {
  margin: 0;
}

.red {
  color: #eb2963;
}
.weight {
  font-weight: 600;
}
.oringe {
  margin: 0 6px;
  text-decoration: line-through;
  color: #999;
}
.app-content {
  padding: 0 16px;
  box-sizing: border-box;
}
.app-content-store {
  margin-top: 60px;
}
.app-content-store-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 15px;
  margin-top: 15px;
}
.app-content-store-address {
  font-size: 13px;
  color: #999999;
  margin-bottom: 20px;
}
.app-content-title {
  font-size: 16px;
  color: #333333;
  font-weight: 700;
  display: inline-block;
  margin: 16px 0 16px;
}
.app-content-line {
  border-radius: 2px;
  height: 4px;
  background: linear-gradient(to right, #b4e6f6, #0fb3e8);
}
.commodity-list-item-1 {
  margin-bottom: 8px;
}
.commodity-list-item-2 {
  font-size: 14px;
}
.vertical-center {
  text-align: right;
  position: relative;
  right: 0%;
  transform: translateY(50%);
  margin-bottom: 12px;
  margin-right: 16px;
}
.vertical-center-item-1 {
  margin-right: 16px;
  float: right;
}

.card_introduce {
  margin-bottom: 20px;
}
.card_introduce >>> img {
  width: 340px !important;
  margin: 0 auto;
}
.app-footer .app-footer-btn {
  width: 50%;
  height: 48px;
  line-height: 48px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}
.app-footer .btn-share {
  background: #fff;
  color: #666;
}
.app-footer .btn-buy {
  background: linear-gradient(to bottom, #ff666c, #ffb97a);
  color: #fff;
}
.margin-top-10 {
  margin-top: 10px;
}
</style>
